<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	{
		const bookList = [
			{
				id: 1,
				bookName: "天龙八部",
				author: "金庸"
			}, {
				id: 2,
				bookName: "小李飞刀",
				author: "古龙"
			}
		];
		// root.render(bookList.map(item => (
		// 	<h3 key={item.id}>{item.bookName}</h3>
		// )));
		
		root.render((
			<div>
				{
					bookList.map(item=>(
						<React.Fragment key={item.id}>
							<h3>《{item.bookName}》</h3>
							<p>作者：{item.author}</p>
						</React.Fragment>
					))
				}
			</div>
		));
		
		
	}
	{
		// 1- 数组是可以直接展开的:<div>1234</div>
		// root.render((
		// 	<div>{[1,2,3,4]}</div>
		// ))
	}
	{
		// 2-
		// let arr = [1,2,3,4];
		// root.render((
		// 	<div>{arr}</div>
		// ))
	}
	{
		// 3
		// let arr = [<h1 key={1}>1</h1>,<h1 key={2}>2</h1>,<h1 key={3}>3</h1>,<h1 key={3}>4</h1>];
		// // <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1>
		// root.render((
		// 	<div>{arr}</div>
		// ))
	}
	{
		// 4
		// let arr = [1,2,3,4].map(item=>{
		// 	return (
		// 		<h1>{item}</h1>
		// 	)
		// });
		
		// let arr = [1,2,3,4].map(item=>(
		// 	<div key={item}>
		// 		<h1>{item}</h1>
		// 	</div>
		// ))
		// root.render((
		// 	<div>{arr}</div>
		// ))
		
		// let arr = [1,2,3,4]
		// root.render((
		// 	<div>{arr.map(item=>(
		// 		<div key={item}>
		// 			<h1>{item}</h1>
		// 		</div>
		// 	))}</div>
		// ))
		
	}
</script>
</html>